<template>
  <!-- 赛事基础设置 -->
  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form-item label="报名形式" prop="signType">
          <el-radio-group @change="changeFN" v-model="form.signType">
            <el-radio label="0">个人报名 </el-radio>
            <el-radio label="1">团体报名 </el-radio>
            <el-radio label="2">团体队伍报名</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="真实照片未上传" prop="noPhotoCanSign"
          ><el-select v-model="form.noPhotoCanSign" placeholder="是否参赛">
            <el-option label="可参赛" value="1" />
            <el-option label="不可参赛" value="0" /> </el-select
        ></el-form-item>
        <el-form-item label="报名须知" prop="signKnow"
          >
          <u-editor v-model="form.signKnow" :min-height="190" />
        </el-form-item>
        <el-form-item label="赛事是否收费" prop="chargeFlag"
          ><el-select v-model="form.chargeFlag" placeholder="是否收费">
            <el-option label="收费" value="1" />
            <el-option label="不收费" value="0" /> </el-select
        ></el-form-item>
        <el-form-item label="赛事保险设置" prop="insuranceFlag"
          ><el-select v-model="form.insuranceFlag" placeholder="是否购买保险">
            <el-option label="不强制够买保险" value="0" />
            <el-option label="强制购买保险" value="1" />
             </el-select
        ></el-form-item>
        <el-row>
          <el-form-item label="赛事人数限制" prop="personLimit"
            ><el-select
              @change="change1"
              v-model="form.personLimit"
              placeholder="是否限制人数"
            >
              <el-option label="限制" :value="0" />
              <el-option label="不限制" :value="-1" /> </el-select
          ></el-form-item>
          <div class="input" v-if="show1">
            <el-input
              type="number"
              placeholder="限报人数"
              v-model="form.ren"
            ></el-input>
          </div>
        </el-row>
        <el-row v-if="show">
          <el-form-item label="参赛队伍人数限制" prop="teamPersonLimit"
            ><el-select
              @change="change2"
              v-model="form.teamPersonLimit"
              placeholder="是否限制队伍人数"
            >
              <el-option label="限制" :value="0" />
              <el-option
                label="不限制"
                :value="-1"
              /> </el-select></el-form-item
          ><del></del>
          <div class="input" v-if="show2">
            <el-input
              placeholder="限报队伍人数"
              v-model="form.dwRen"
              type="number"
            ></el-input>
          </div>
        </el-row>
        <el-row v-if="show">
          <el-form-item label="参赛队伍限制" prop="teamLimit"
            ><el-select
              @change="change3"
              v-model="form.teamLimit"
              placeholder="是否限制队伍"
            >
              <el-option label="限制" :value="0" />
              <el-option label="不限制" :value="-1" /> </el-select
          ></el-form-item>
          <div class="input" v-if="show3">
            <el-input
              type="number"
              placeholder="限报队伍数"
              v-model="form.dw"
            ></el-input>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="lastStep(id)">上一步</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="primary" @click="nextStep(id)">下一步</el-button>
    </el-row>
  </el-form>
</template>

<script setup >
import { useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { competitionSet, editApi, updateApi } from "@/api/match/league.js";
const router = useRoute();
const emit = defineEmits(["nextStep"]);
const { proxy } = getCurrentInstance();
const id = ref();
const show = ref(true);
const show1 = ref(true);
const show2 = ref(true);
const show3 = ref(true);
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  leagueId: {
    type: String,
    default: undefined,
  },
});
const flag = ref(false);

const data = reactive({
  rules: {
    signType: { required: true, message: "请选择报名形式", trigger: "blur" },
    chargeFlag: { required: true, message: "请选择是否收费", trigger: "blur" },
    insuranceFlag: {
      required: true,
      message: "请选择保险",
      trigger: "blur",
    },
    personLimit: [
      {
        required: true,
        message: "请选择是否限制参赛人数",
        trigger: "blur",
      },
      { validator: validate1, trigger: "blur" },
    ],
    teamPersonLimit: [
      {
        required: true,
        message: "请选择是否限制参赛队伍人数",
        trigger: "blur",
      },
      { validator: validate2, trigger: "blur" },
    ],
    teamLimit: [
      {
        required: true,
        message: "请选择是否限制参赛队伍",
        trigger: "blur",
      },
      { validator: validate3, trigger: "blur" },
    ],
    // signType: { required: true, message: "请选者报名形式", trigger: "blur" },
    signKnow: { required: true, message: "请输入", trigger: "blur" },
    noPhotoCanSign: {
      required: true,
      message: "请选择真实图片未上传是否参赛",
      trigger: "blur",
    },
  },
  form: {
    signType: "",
  },
});
const { rules, form } = toRefs(data);

// 回显数据
if (props.id) {
  initData();
}
async function initData() {
  form.value.id = props.id;
  let res = await editApi(form.value);
  form.value = res.data;
  form.value.teamLimit = parseInt(form.value.teamLimit);
  form.value.teamPersonLimit = parseInt(form.value.teamPersonLimit);
  if (form.value.signType == 0) {
    show.value = false;
  } else {
    show.value = true;
  }
  if (form.value.personLimit != -1) {
    show1.value = true;
    form.value.ren = form.value.personLimit;
    form.value.personLimit = 0;
  } else {
    show1.value = false;
  }
  if (form.value.teamPersonLimit != -1) {
    show2.value = true;
    form.value.dwRen = form.value.teamPersonLimit;
    form.value.teamPersonLimit = 0;
  } else {
    show2.value = false;
  }
  if (form.value.teamLimit != -1) {
    show3.value = true;
    form.value.dw = form.value.teamLimit;
    form.value.teamLimit = 0;
  } else {
    show3.value = false;
  }
}

function validate1(rule, value, callback) {
  if (show1.value) {
    if (form.value.ren == undefined || form.value.ren == "") {
      callback(new Error("请输入限报人数"));
    } else {
      callback();
    }
  } else {
    callback();
  }
}
function validate2(rule, value, callback) {
  if (show2.value) {
    if (form.value.dwRen == undefined || form.value.dwRen == "") {
      callback(new Error("请输入限报参赛队伍人数"));
    } else {
      callback();
    }
  } else {
    callback();
  }
}
function validate3(rule, value, callback) {
  if (show3.value) {
    if (form.value.dw == undefined || form.value.dw == "") {
      callback(new Error("请输入限报队伍"));
    } else {
      callback();
    }
  } else {
    callback();
  }
}

// 保存
function submitForm() {
  // if (flag.value) return;
  return new Promise((resolve, reject) => {
    proxy.$refs["formRef"].validate(async (valid) => {
      if (valid) {
        form.value.id = props.id;
        if (form.value.insuranceFlag == 3) {
          form.value.usePlatformFlag = 1;
        }
        show1.value ? (form.value.personLimit = form.value.ren) : "";
        show2.value ? (form.value.teamPersonLimit = form.value.dwRen) : "";
        show3.value ? (form.value.teamLimit = form.value.dw) : "";
        let res = null;
        if (props.id) {
          res = await updateApi(form.value);
        } else {
          res = await competitionSet(form.value);
        }
        if (res.code == 200) {
          id.value = res.data;
          proxy.$modal.msgSuccess("保存成功");
          flag.value = true;
          show1.value ? (form.value.personLimit = 0) : "";
          show2.value ? (form.value.teamPersonLimit = 0) : "";
          show3.value ? (form.value.teamLimit = 0) : "";
        } else {
          proxy.$modal.msgError("保存失败，请重新操作");
        }
      } else {
        proxy.$modal.msgError("请完善信息");
      }
      if (flag.value) {
        resolve("成功");
      } else {
        reject("失败");
      }
    });
  });
}

function change1(e) {
  console.log("chang1", e);
  if (e != -1) {
    show1.value = true;
  } else {
    show1.value = false;
  }
}
function change2(e) {
  console.log(e);

  if (e != -1) {
    show2.value = true;
  } else {
    show2.value = false;
  }
}
function change3(e) {
  console.log("chang3", e);
  if (e != -1) {
    show3.value = true;
  } else {
    show3.value = false;
  }
}

// 下一步
async function nextStep() {
  if (flag.value) {
    emit("nextStep", 3, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 3, id.value);
  }
}

// 上一步
async function lastStep() {
  if (flag.value) {
    emit("nextStep", 1, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 1, id.value);
  }
}

function changeFN(e) {
  if (e == 0) {
    show.value = false;
  } else {
    show.value = true;
  }
}
</script>

<style scoped>
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}
.el-row {
  flex-wrap: nowrap;
}
.input {
  margin-left: 20px;
}
</style>
